@extends('layouts.app')

@section('content')
<style>
    body {
        height: 900px;
        background: url(/img/8.png) no-repeat top center;
        overflow: none;
    }

    .tit {
        background: url(/img/9.png) no-repeat;
        padding-left: 20px;
        width: 748px;
        font: 24px '微软雅黑';
        color: #333;
        line-height: 27px;
        margin: 0 auto 40px;
    }

    .list {
        width: 748px;
        margin: 0 auto;
    }

    .list p {
        display: block;
        width: 710px;
        font: 20px '微软雅黑';
        color: #333;
        line-height: 42px;
        margin-bottom: 15px;
    }

    .list ul li {
        font: 16px '微软雅黑';
        color: #333;
        padding-left: 40px;
        line-height: 48px;
        background: url(/img/21.png) no-repeat center left;
        cursor: pointer;
    }

    .list ul li.cur {
        background: url(/img/22.png) no-repeat center left;
        color: #a71212;
    }

    .but {
        width: 748px;
        margin: 96px auto 0;
    }

    .but a {
        display: inline-block;
    }

    .but a.one {
        width: 140px;
        height: 40px;
        background: url(/img/12.png) no-repeat;
        margin-left: 120px;
        position: relative;
    }

    .but a.two {
        width: 140px;
        height: 40px;
        background: url(/img/11.png) no-repeat;
        margin-left: 50px;
    }

    .but a.thr {
        width: 140px;
        height: 40px;
        background: url(/img/show_list.jpg) no-repeat;
        margin-left: 50px;
    }

    .but a.submit {
        background: url(/img/13.png) no-repeat;
    }

    .but a.hide {
        background: url(/img/hide_list.jpg) no-repeat;
    }

    .nav {
        width: 960px;
        margin: 0 auto;
        height: 45px;
    }

    .nav li {
        float: left;
        color: #593a0f;
        font: 14px '微软雅黑';
        line-height: 45px;
        margin-right: 80px;
    }

    .table {
        width: 1000px;
        margin: 40px auto 0;
    }

    .table li li{
        float:left;
        border:1px solid rgb(163, 159, 159);
        font-size: 16px;
        width: 40px;
        text-align: center;
        margin: 4px;
    }

    a:hover {
        text-decoration: none;
    }
</style>
<div style="height: 176px;"></div>
<ul class="nav">
    <li>用户名：{{ $user->username }}</li>
    <li>
        <a href="javascript:void(0)" onclick="if (confirm('是否确认退出！')) {$('#logout-form').submit();}">退出</a>

        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
            @csrf
        </form>
    </li>
    <li style="margin-right: 0; float: right;">
        <span id="time">离交卷时间：</span>
        <span id="_m" style="font-weight: bold;">0 分</span>
        <span id="_s" style="font-weight: bold;">0 秒</span>
    </li>
    <li style="float: right;">
        <span>未答题目：</span>
        <span id="count" style="font-weight: bold;" data-count="{{ $questions->count() }}">0</span>
    </li>
</ul>
<div style="height: 41px;"></div>

@foreach($questions as $question)
    <div
        class="question"
        style="{{ ($index == $loop->iteration) ? '' : 'display: none;' }}"
        data-id="{{ $question->id }}"
        data-type="{{ $question->type }}"
        data-index="{{ $loop->iteration }}"
        data-answer="{{ implode(',', $question->user_answer ?? []) }}"
    >
        <div class="tit">{{ $question->type_name }}</div>
        <div class="list">
            <p>{{ $loop->iteration }}. {{ $question->question }}</p>
            <ul>
                @if($question->type == 2)
                    <li data-id="1" class="{{ in_array('1', $question->user_answer ?? []) ? 'cur' : '' }}">正确</li>
                    <li data-id="2" class="{{ in_array('2', $question->user_answer ?? []) ? 'cur' : '' }}">错误</li>
                @else
                    <li data-id="1" class="{{ in_array('1', $question->user_answer ?? []) ? 'cur' : '' }}">{{ $question->option_1 }}</li>
                    <li data-id="2" class="{{ in_array('2', $question->user_answer ?? []) ? 'cur' : '' }}">{{ $question->option_2 }}</li>
                    <li data-id="3" class="{{ in_array('3', $question->user_answer ?? []) ? 'cur' : '' }}">{{ $question->option_3 }}</li>
                    <li data-id="4" class="{{ in_array('4', $question->user_answer ?? []) ? 'cur' : '' }}">{{ $question->option_4 }}</li>
                @endif
            </ul>
        </div>
    </div>
@endforeach

<div class="but">
    <a class="one prev" href="javascript:void(0)"></a>
    <a class="two next" href="javascript:void(0)"></a>
    <a class="thr show" href="javascript:void(0)"></a>
</div>

<ul class="table" style="display: none;">
    <li id="question_list" style="float: left;">
        @foreach($questions->chunk(20) as $chunk)
            <ul>
                @foreach($chunk as $question)
                    <li
                        style="{{ $question->user_answer ? 'background-color: #5BA6F6;' : '' }}"
                        data-id="{{ $loop->parent->index * 20 + $loop->iteration }}"
                    >
                        <a href="javascript:void(0)">{{ $loop->parent->index * 20 + $loop->iteration }}</a>
                    </li>
                @endforeach
            </ul>
        @endforeach
    </li>
</ul>

<script type="text/javascript">
    $(function () {
        var count = $('#count');

        // 剩余题目数量
        count.text($('.question[data-answer=]').length);

        // 最后一题显示提交按钮
        if ($('.question:visible').data('index') === count.data('count')) {
            $('.but>.next').addClass('submit');
        }

        // 切换选项
        $('.list ul li').on('click', function () {
            if ($(this).parents('.question').data('type') === 1) {
                // 多选题
                $(this).toggleClass('cur');
            } else {
                // 选择题或判断题
                $(this).addClass('cur').siblings().removeClass('cur');
            }
        });

        // 上一题下一题
        $('.but a').on('click', function () {
            var _this = $(this);
            var question = $('.question:visible');
            var id = question.data('id');
            // var type = question.data('type');
            var index = question.data('index');
            var answer = question.data('answer');
            var choice = [];

            if (_this.hasClass('show')) {
                return;
            }

            // 第一题点击上一题无效
            if (index === 1 && _this.hasClass('prev')) {
                alert('没有上一题了！')
                return;
            }

            // 第一题点击上一题无效
            if (index === 1 && _this.hasClass('prev')) {
                alert('没有上一题了！')
                return;
            }

            // 修改答案
            question.find('.list>ul>li[class=cur]').each(function () {
                choice.push($(this).data('id'));
            });

            // if (choice.length === 0) {
            //     alert('请选择答案！');
            //     return;
            // }
            //
            // if (type === 1 && choice.length < 2) {
            //     alert('本题是多选题哦！');
            //     return;
            // }

            // 提交答案
            if (answer !== choice.join(',')) {
                // $.ajaxSettings.async = false;
                $.ajax({
                    url: '/answer/' + id,
                    type: 'POST',
                    async: false,
                    data: {_token: '{{ csrf_token() }}', answer: choice},
                    dataType: 'json',
                    success: function (result) {
                        if (result.message !== 'success') {
                            alert(result.message);
                            window.location.reload();
                            return;
                        }

                        $('#question_list').find('li:eq(' + (index - 1) + ')').css({'background-color': '#5BA6F6'});
                        question.attr('data-answer', choice);
                        question.data('answer', choice);
                    },
                    error: function (error) {
                        var response = eval('(' + error.responseText + ')');

                        if (response.message === 'CSRF token mismatch.') {
                            alert('您的账号已在其他地方登录！');
                        } else {
                            alert('考试异常！请联系管理员！' + response.message);
                        }

                        window.location.reload();
                    }
                });
            }

            // 最后一题交卷
            if (_this.hasClass('submit')) {
                var leftQuestion = $('.question[data-answer=]').length;
                var notice = leftQuestion ? '还有 ' + leftQuestion + " 道题未答！\n" : '';

                var r = confirm(notice + '是否确认交卷！');
                if (r === true) {
                    window.location.href = '{{ route('score') }}';
                }
                return;
            }

            // 切换题目、切换地址栏考题序号
            if (_this.hasClass('prev')) {
                question.hide().prev().show();
                index = index - 1;
            } else if (_this.hasClass('next')) {
                question.hide().next().show();
                index = index + 1;
            }

            // 剩余题目数量
            count.text($('.question[data-answer=]').length);

            // 最后一题显示提交按钮
            if (index === count.data('count') && _this.hasClass('next')) {
                $('.but>.next').addClass('submit');
            } else {
                $('.but>.next').removeClass('submit');
            }
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        // 考试剩余时间
        var leftTime = '{{ $timeLeft }}';

        // 倒计时
        countTime();

        function countTime() {
            // 定义变量 m,s 保存倒计时的时间
            var m = 0, s = 0;
            if (leftTime >= 0) {
                // 剩余 5 分钟时弹框提示
                if (leftTime == 299) {
                    alert('考试还剩最后 5 分钟！');
                }

                m = Math.floor(leftTime / 60 % 60);
                s = Math.floor(leftTime % 60);
                leftTime -= 1;
            } else {
                alert('考试已结束，点击确定查看得分！');
                window.location.reload();
            }

            // 展示倒计时
            $('#_m').html(m + ' 分');
            $('#_s').html(s + ' 秒');

            // 递归每秒调用countTime方法，显示动态时间效果
            setTimeout(countTime, 1000);
        }
    });
</script>
<script type="text/javascript">
    $(function () {
        var table = $('.table');

        // 展示隐藏答题记录
        $('.but>.thr').on('click', function () {
            $(this).toggleClass('hide');
            table.toggle();
        });

        // 点击序号显示相应题目
        $('#question_list>ul>li').on('click', function () {
            var question_count = $('#count').data('count');
            var question_index = $(this).data('id');
            if (question_count == question_index) {
                $('.but>.next').addClass('submit');
            } else {
                $('.but>.next').removeClass('submit');
            }
            $('.question:eq(' + (question_index - 1) + ')').show().siblings('.question').hide();
        })
    });
</script>
@endsection
